import React, { Component } from "react";
import echarts from "echarts";
import PropTypes from "prop-types";

class TheLineChart extends Component {
  componentDidMount() {
    const myChart = echarts.init(this.chartRef);
    myChart.setOption({
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          crossStyle: {
            color: "#999",
          },
        },
      },
      // grid: {
      //   right: 50,
      // },
      xAxis: [
        {
          type: "category",
          data: this.props.lineXData,
          //   axisPointer: {
          //     type: "shadow",
          //   },
          axisLabel: {
            fontSize: 16,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: this.props.yName,
          axisLabel: {
            fontSize: 16,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisPointer: {
            show: false,
          },
        },
      ],
      color: ["#7696f8", "#72cbdb"],
      series: [
        {
          type: "line",
          name: this.props.name,
          smooth: true,
          data: this.props.lineYData,
        },
      ],
    });
  }

  render() {
    return (
      this.props.lineXData &&
      this.props.lineYData && (
        <div
          ref={(ref) => (this.chartRef = ref)}
          id="lineChart"
          style={{ width: "100%", height: "100%" }}
        />
      )
    );
  }
}

TheLineChart.propTypes = {
  lineXData: PropTypes.array,
  lineYData: PropTypes.array,
  name: PropTypes.string,
  yName: PropTypes.string,
  xName: PropTypes.string,
};
TheLineChart.defaultProps = {
  lineXData: [],
  lineYData: [],
  name: "消费明细",
  yName: "",
  xName: "",
};
export default TheLineChart;
